<div id="app-details" v-cloak>
  <div purpose="page-container">
    <div purpose="page-content" class="container p-0">
      <docs-nav-and-search current-section="software" search-filter="software" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
      <div purpose="breadcrumbs" class="d-flex flex-row align-items-start">
        <div>
          <a purpose="breadcrumbs-category" class="text-nowrap" href="/software-catalog">Software</a>/
        </div>
        <div purpose="breadcrumbs-title">
          <span><%- thisApp.name %></span>
        </div>
      </div>
      <div purpose="app-details-and-sidebar" class="d-flex flex-nowrap flex-lg-row flex-column">
        <div purpose="app-details" class="d-inline-flex flex-column flex-shrink w-0">
          <div purpose="icon-and-name" class="d-flex">
            <div purpose="app-icon"><img  alt="<%- thisApp.name %> icon"  src="/images/<%- thisApp.iconFilename %>"></div>
            <div class="d-flex flex-column">
              <h2 purpose="app-name"><%- thisApp.name %></h2>
              <div purpose="platform-and-version" class="d-flex flex-row">
                  <p><%- thisApp.platform === 'darwin' ? 'macOS' : 'Windows' %> | <%- thisApp.version %></p>
              </div>
            </div>
          </div>
          <p purpose="app-description"><%- thisApp.description %></p>
          <div purpose="app-install">
            <h3>Self-service install</h3>
            <p>To install <%- thisApp.name %> on your work computer:</p>
            <ol>
              <li>Navigate to the <strong>Fleet Desktop</strong> icon in the OS menu bar and select <strong>My device</strong>.</li>
              <li>From the <strong>Self-service</strong> tab, navigate to <%- thisApp.name %> and click <strong>Install</strong>.</li>
            </ol>
            <p>Don’t see <%- thisApp.name %> or the Fleet Desktop icon? Send a <a :href="'/software-catalog/'+thisApp.identifier">link to this page</a> to your IT team.</p>
          </div>
          <% if(thisApp.platform === 'darwin'){%>
          <div purpose="app-uninstall">
            <h3>Uninstall <%- thisApp.name %></h3>
            <p>Run the following command in your terminal to uninstall <%- thisApp.name %>:</p>
            <div purpose="codeblock">
              <div purpose="copy-button"></div>
              <pre><code class="hljs bash"><%= _.unescape(thisApp.uninstallScript) %></code></pre>
            </div>
          </div>
          <% } %>
          <div purpose="app-check">
            <h3>Is <%- thisApp.name %> up to date?</h3>
            <p>Run this query in Fleet to find old versions of <%- thisApp.name %> across all your computers:</p>
            <div purpose="codeblock">
              <div purpose="copy-button"></div>
              <% if(thisApp.platform === 'darwin'){%>
              <pre><code class="hljs sql">SELECT 1 FROM apps WHERE bundle_identifier = '<%= thisApp.bundleIdentifier %>' AND bundle_short_version <= '<%- thisApp.version %>';</code></pre>
              <% } else {%>
              <pre><code class="hljs sql">SELECT 1 FROM programs WHERE name = '<%= thisApp.bundleIdentifier %>' AND version <= '<%- thisApp.version %>';</code></pre>
              <% }%>
            </div>
          </div>
        </div>
          <div purpose="right-sidebar" class="d-flex flex-column">
            <div purpose="social-share-buttons" class="d-flex flex-column order-lg-2 order-1">
              <p><strong>Share</strong></p>
              <div class="d-flex flex-row">
                <a :href="`https://news.ycombinator.com/submitlink?u=https://fleetdm.com/software-catalog/${encodeURIComponent(thisApp.identifier)}&t=${encodeURIComponent(thisApp.name)}`"><img src="/images/social-share-icon-hacker-news-20x20@2x.png" alt="Share this article on Hacker News"></a>
                <a :href="`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://fleetdm.com/software-catalog/'+thisApp.identifier)}`"><img src="/images/social-share-icon-linkedin-20x20@2x.png" alt="Share this article on LinkedIn"></a>
                <a :href="`https://twitter.com/intent/tweet?url=${encodeURIComponent('https://fleetdm.com/software-catalog/'+thisApp.identifier)}`"><img src="/images/social-share-icon-twitter-20x20@2x.png" alt="Share this article on Twitter"></a>
              </div>
            </div>
            <div purpose="docs-links" class="order-3">
              <a href="/docs">Docs</a>
              <a href="/docs/rest-api">REST API</a>
              <a href="/guides">Guides</a>
              <a purpose="edit-button" class="d-flex align-items-center text-nowrap" target="_blank" :href="'https://github.com/fleetdm/fleet/tree/main/ee/maintained-apps/outputs/apps.json#L'+thisApp.lineNumberInJson"><img alt="A pencil icon" src="/images/pencil-16x16@2x.png">Edit page</a>
            </div>
          </div>
      </div>
    </div>
  </div>
  <signup-modal></signup-modal>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
